<template>
  <div>
    <el-form
      :inline="true"
      :show-message="false"
      :hide-required-asterisk="true"
      :model="fromdata"
      label-width="130px"
      label-position="right"
    >
      <el-row class="">
        <el-col :span="12">预约信息</el-col>
        <el-col :span="12">
          <el-row type="flex" justify="end">
            <el-button
            type="warning"
             v-permission="'subscribe:postpone'"
            @click="sender(1)"
            v-if="fromdata.status!='预约取消'&&fromdata.status=='已预约'&&fromdata.status!='已转工单'"
          >预约延期</el-button>
          <el-button
            type="primary"
             v-permission="'subscribe:affirm'"
            @click="sender(2)"
            v-if="fromdata.status!='预约取消'&&fromdata.status=='已预约'&&fromdata.status!='已转工单'"
          >预约确认</el-button>
          <el-button
            type="success"
             v-permission="'subscribe:turnWorkOrder'"
            @click="sender(3)"
             v-if="fromdata.status!='预约取消'&&fromdata.status!='已转工单'"
          >转工单</el-button>
          <el-button
            type="danger"
             v-if="fromdata.status!='预约取消'&&fromdata.status!='已转工单'"
             v-permission="'subscribe:cancel'"
            @click="sender(4)"
          >预约取消</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="10">
          <el-form-item label="预约编号:">
            <div>{{fromdata.subscribeCode}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="预约门店:">
            <div>{{fromdata.storeName}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="预约工单类型:">
            <div>{{fromdata.subscribeWorkOrderDictValue}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="预约到店:">
            <div>{{fromdata.subscribeDate+' '+fromdata.visitTime}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="预约接待:">
            <div>{{fromdata.userName}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="预约来源:">
            <div>{{fromdata.subscribeTypeDictValue}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="预约备注:">
            <div>{{fromdata.remark}}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      v-if="dialogVisible"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      @close="dialogClose"
    >
      <el-form
        :inline="true"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="dialogfrom"
        label-width="130px"
        label-position="right"
      >
        <el-row class="">
          <el-form-item
            label="预约时间:"
            prop="postponeStartDate"
          >
            {{dialogfrom.postponeStartDate+' '+dialogfrom.visitTime}}
          </el-form-item>
          <!--<el-form-item-->
            <!--label="延期时间:"-->
            <!--prop="postponeEndDate"-->
          <!--&gt;-->
            <!--<el-date-picker-->
              <!--v-model="dialogfrom.postponeEndDate"-->
              <!--type="datetime"-->
              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
              <!--placeholder="选择日期时间"-->
            <!--&gt;-->
            <!--</el-date-picker>-->
          <!--</el-form-item>-->
          <el-form-item
            label="预约到店日期:"
            prop="subscribeDate"
          >
            <el-date-picker
              v-model="dialogfrom.subscribeDate"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 200px"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="预约开始时间:"
            prop="startVisitTime"
          >
            <el-time-select
              placeholder="起始时间"
              v-model="dialogfrom.startVisitTime"
              :picker-options="{
                start: '09:00',
                step: '00:15',
                end: '18:00',
                minTime:defalutStartVisitTime,
              }"
            >
            </el-time-select>
          </el-form-item>
          <el-form-item
            label="预约结束时间:"
            prop="endVisitTime"
          >
            <el-time-select
              placeholder="起始时间"
              v-model="dialogfrom.endVisitTime"
              :picker-options="{
                start: '09:00',
                step: '00:15',
                end: '18:00',
                  minTime: dialogfrom.startVisitTime
              }"
            >
            </el-time-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            label="延期备注:"
            prop="remark"
          >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="dialogfrom.remark"
            >
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col align='right'>
            <el-button
              class="sumbitButton"
              type="primary"
              @click="dialoOnOk"
            >确认</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import baseMixin from '@/mixins/base'
import moment from 'moment';
import {
  subscribePostpone,
} from '@/api/after-sale/customer-center/index'
export default {
  name: 'carInfo',
  components: {},
  props: {
    fromdata: {
      type: Object,
      default: () => ({})
    }
  },
  mixins: [baseMixin({})],
  data () {
    return {
      pickerOptions: {
        disabledDate: (value) => {
          return !moment(value).isAfter(moment(new Date()).subtract(1, 'days'));
        }
      },
      dialogfrom: {
        id: '',
        postponeStartDate: '',
        startVisitTime: '',
        endVisitTime: '',
        subscribeDate: '',
        visitTime: '',
        remark: ""
      }
    }
  },
  async created () {
  },
  computed: {
    //计算开始时间能选的范围
    defalutStartVisitTime () {
      this.dialogfrom.startVisitTime = '';
      let time = this.dialogfrom.subscribeDate;
      if (time && !moment(time).isAfter(moment())) {
        //如果是当天时间则，只能选时刻以后的
        return moment().format('HH:mm:ss')
      } else {
        return '08:00'
      }
    },
  },
  methods: {
    //延期弹窗确认
    dialoOnOk () {
      let option = Object.assign({}, this.dialogfrom);
      option.visitTime = option.startVisitTime + ':00-' + option.endVisitTime + ':00';
      subscribePostpone(option).then(res => {
        let { success } = res;
        if (success) {
          this.$message.success('操作成功');
          this.$emit('operateAction', { type: 1 })
          this.dialogClose();
        }
      })
    },
    sender (type) {
      if (type == 1) {
        this.dialogfrom.id = this.fromdata.id;
        this.dialogfrom.postponeStartDate = this.fromdata.subscribeDate;
        this.dialogfrom.visitTime = this.fromdata.visitTime;
        this.handleDataInsert('预约延期');
      } else {
        let obj = {
          carryInformation: this.fromdata,//2 确认 3 工单 4 取消
          type: type,
          // carryInformation: {},//携带信息
        }
        this.$emit('operateAction', obj)
      }
    },
    changeType (item) {
      this.selectedTypeText = item.label;
    },
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
